<template>
	<view class="searchOrder">
		<view class="header">
			<view class="search">
				<view class="input_box">
					<image src="../../static/icons/zjc/search_icon@2x.png" mode="" class="search_icon"></image>
					<input type="text" value="" class="input_content" placeholder="搜索订单" />
				</view>
				<image src="../../static/icons/zjc/icon_msg@2x.png" mode="" class="msg_icon"></image>
			</view>
			<view class="types">
				<view v-for="(item,index) in types" :key="item" class="title" :class="{active:currentIndex==index}"
					@tap="currentClass(index)">
					{{item}}
				</view>
			</view>
		</view>

		<view class="container">
			<view class="order" v-for="(item,index) in goodsOrder">
				<view class="order_title" style="display: flex;">
					<view class="left">
						<text class="goods_name">赤兔官方工作店</text>
						<navigator url="">
							<image src="../../static/icons/zjc/button_back_arrow2x.png" mode="" class="icon_back">
							</image>
						</navigator>
					</view>
					<view class="right">
						<text class="state" v-if="item.status==19">等待付款</text>
						<!-- <text class="state" v-if="currentIndex==3">卖家已发货</text> -->
					</view>
				</view>
				<view class="order_main">
					<view class="order_info">
						<image
							:src="item.orderdetailList[0].goodsImg"
							mode="" class="goods_image"></image>
						<view class="detail">
							<view class="goods_detail">
								{{item.orderdetailList[0].goodsName}}
							</view>
							<text class="num">共<text style="color: #F01414; font-size: 32rpx;">
							{{item.orderdetailList[0].buyCount}}
							</text>件</text>
						</view>
						<view class="goods_price">
							<text class="symbol">￥</text>
							<text class="price">{{item.orderdetailList[0].goodsPrice}}</text>
						</view>
					</view>
					<view class="order_btn">
						<view class="">
						</view>
						<view class="left">
							<view type="default" class="red btn">取消订单</view>
								<view type="default" class="gray btn" @tap="nowPay(index)">立即支付</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("goods");
	export default {
		data() {
			return {
				types: ["全部", "足迹", "待付款", "待收货", "已完成", "已取消"],
				currentIndex: 0
			}
		},
		async onShow(){
			await this.userGoodsOrder({
				userId:uni.getStorageSync("id")
			});
			console.log(this.goodsOrder);
		},
		methods: {
			...mapActions(["userGoodsOrder"]),
			currentClass(index) {
				this.currentIndex = index;
			},
			nowPay(index){
				let total=this.goodsOrder[index].orderdetailList[0].goodsPrice;
				uni.navigateTo({
					url:`../payment/payment?total=${total}&id=${this.goodsOrder[index].id}`
				})
			}
		},
		computed:{
			...mapState(["goodsOrder"])
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.header {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		padding: 0 15rpx;
		background-color: #ffffff;
		margin-bottom: 24rpx;
	}

	.header .search {
		display: flex;
		justify-content: space-evenly;
		margin-bottom: 24rpx;
		margin-left: 64rpx;
	}

	.header .back_icon {
		width: 48rpx;
		height: 48rpx;
		margin-top: 5rpx;
		margin-left: 34rpx;
	}

	.header .input_box {
		width: 512rpx;
		height: 56rpx;
		display: flex;
		background-color: #e9e9e9;
		border-radius: 28rpx;
	}

	.header .input_box .search_icon {
		width: 50rpx;
		height: 50rpx;
		margin-left: 18rpx;
		margin-top: 8rpx;
	}

	.header .input_content {
		width: 456rpx;
		height: 56rpx;
		background-color: #e9e9e9;
		border-radius: 28rpx;
		box-sizing: border-box;
		padding-left: 10rpx;
	}

	.header .msg_icon {
		width: 60rpx;
		height: 60rpx;
	}

	.types {
		display: flex;
		/* padding: 10rpx 34rpx; */
		background-color: #ffffff;
		justify-content: space-around;

	}

	.types .title {
		margin: 0 25rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #343434;
	}

	.types .active {
		border-bottom: 5rpx solid #F5601C;
	}

	.container .order {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
	}
	.order .order_title{
		display: flex;
		justify-content: space-between;
	}
	.order_title .left{
		display: flex;
	}
	.order_title .goods_name {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #343434;
	}
	.order_title .state{
		font-size: 24rpx;
		line-height: 34rpx;
		color: #ee1515;
	}

	.order_title .icon_back {
		width: 40rpx;
		height: 40rpx;
	}

	.order_main .order_info {
		display: flex;
	}

	.order_info .goods_image {
		width: 138rpx;
		height: 138rpx;
	}

	.order_info .detail {
		margin: 0 34rpx 0 20rpx;
	}

	.order_info .detail .goods_detail {
		width: 378rpx;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #343434;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.detail .num {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #343434;
	}

	.goods_price .symbol {
		font-size: 24rpx;
		line-height: 38rpx;
		color: #343434;
	}
	.goods_price .price{
		font-family: DIN;
		font-size: 32rpx;
		font-weight: normal;
		color: #343434;
	}

	.order .order_btn {
		display: flex;
		justify-content: space-between;
	}
	.order .order_btn .left{
		display: flex;
	}

	.order_btn .btn {
		width: 140rpx;
		height: 54rpx;
		border-radius: 28rpx;
		margin-left: 20rpx;
		text-align: center;
	}

	.order_btn .red {
		border: solid 2rpx #ee1515;
		font-size: 24rpx;
		line-height: 54rpx;
		color: #ee1515;
	}

	.order_btn .gray {
		border: solid 2rpx #b5b5b5;
		font-size: 24rpx;
		line-height: 54rpx;
		color: #3c3c3c;
	}
</style>
